<template>
  <div class="">
    <div class="sticky top-0 z-10 shadow-sm shadow-black-500/40">
      <nut-searchbar
        v-model="searchValue"
        background="#fff"
        placeholder="请输入用户昵称"
      >
        <template v-slot:leftin>
          <Search2 />
        </template>
      </nut-searchbar>
    </div>
    <div v-if="list.length" class="p-3">
      <div
        class="p-3 border-b-1 border-gray-100 last:border-b-0 flex"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="w-12 h-12 overflow-hidden rounded-full">
          <nut-image
            :src="item.avatar"
            fit="cover"
            lazy-load
            class="w-full h-full"
          ></nut-image>
        </div>
        <div class="ml-3 text-base">
          <div class="text-base">昵称：{{ item.nickname }}</div>
          <div class="text-sm mt-1 text-gray-500">
            注册时间：{{
              new Date(item.createTime).toLocaleDateString().replace(/\//g, "-")
            }}
          </div>
        </div>
      </div>
    </div>
    <div v-else class="fixed inset-0 flex justify-center items-center">
      <nut-empty description="无数据"></nut-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search2 } from "@nutui/icons-vue";
import * as promotionApi from "@/api/train/promotion";
import _ from "lodash";

const list = ref<ListInvitedUserResult[]>([]); // 数据列表
const search = _.debounce(
  (keyword: string = "") =>
    promotionApi
      .invitedUserList(keyword)
      .then((res) => (list.value = res.data)),
  500
);

const searchValue = ref("");
watch(searchValue, search);

// 初始化
search("");
</script>
